<template>
  <div class="page">
    <div class="header_box">
        <Input class="search_box" v-model="search_text" search placeholder="请输入商品" @on-enter="go_search"/>
    </div>
    <div>
      <el-carousel class="lunbo" height="150px">
        <el-carousel-item v-for="i in 3" :key="i">
          <img class="img" :src="'images/0'+i+'.jpg'" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="menu_box">
      <!-- <div class="icon_item" @click="$goPage('/cate')">
        <div class="icon_bg bg1">
          <Icon type="ios-apps"/>
        </div>
        <div>全部分类</div>
      </div> -->
      <div class="icon_item" v-for="(item) in cate_list" :key="item" @click="$goPage('/cate_list?id='+item.cid)">
        <div class="icon_bg">
          <!-- <Icon type="ios-apps"/> -->
          <img class="icon_bg" :src="item.c_img" alt=""/>
        </div>
        <div>{{ item.c_name }}</div>
      </div>
    </div>

    <div class="hot_plan">
      <div class="hot_title">
        <div>今日推荐</div>
        <!-- <div @click="$goPage('cate_list?id=recomm')">更多></div> -->
      </div>

      <div class="hot_list">
        <Book v-for="item in recomm_book_list"
        :key="item"
              @click="$goPage('/info?id='+item.id)"
              :img_path="item.img"
              :title="item.g_name"></Book>
      </div>
    </div>


    <div class="hot_plan">
      <div class="hot_title">
        <div>畅销菜品</div>
        <!-- <div @click="$goPage('cate_list?id=hot')">更多></div> -->
      </div>

      <div class="hot_list">
        <Book2
            v-for="item in hot_book_list"
            :title="item.g_name"
            :key="item"
            :img_path="item.img"
            :author="item.price"
            :intro="item.burdening"
            @click="$goPage('/info?id='+item.id)"
        ></Book2>
      </div>
    </div>
    <BottomBar :index="1"></BottomBar>
  </div>
</template>

<script>
import Book from "@/components/Book.vue"
import Book2 from "@/components/Book2.vue"
import BottomBar from "@/components/BottomBar";

export default {
  name: 'IndexView',
  components: {
    Book,
    Book2,
    BottomBar,
  },
  data() {
    return {
      cate_list: [],
      hot_book_list: [],
      recomm_book_list: [],
      search_text:""
    }
  },
  mounted() {
    this.get_dingding_info()
    this.get_cate_info()
    this.get_hot_data()
    this.get_recomm_data()
  },
  methods: {
    go_search(){
       this.$router.push("/cate_list?id=search&word=" + this.search_text)
    },
    get_recomm_data() {
      this.$axios.get("business/recommend/4/").then(res => {
        if (res.data.code == 200) {
          console.log('>?>?>?>',res.data.data)
          this.recomm_book_list = res.data.data
        }
      })
    },
    get_hot_data() {
      this.$axios.get("business/recommend/5/").then(res => {
        if (res.data.code == 200) {
          this.hot_book_list = res.data.data
        }
      })
    },
    get_cate_info() {
      this.$axios.get("business/classify/").then(res => {
        if (res.data.code == 200) {
          this.cate_list = res.data.data
        }
      })
    },
    get_dingding_info() {
      const code = this.$route.query.authCode
      if (!code) {
        return
      }
      //根据code换取token
      this.$axios.get("user/ding?code=" + code).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
          localStorage.setItem("token", res.data.data.token)
          this.$router.push("/")
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.page {
  background-color: rgb(242, 242, 242);
  padding-bottom: 60px;
}

.header_box {
  background-color: #FFFFFF;
}

.search_box {
  width: calc(100% - 20px);
  margin: 20px 10px;
}

.lunbo {
  border-radius: 10px;
  margin: 0 10px;
}

.img {
  width: 100%;
  height: 100%;
}

.menu_box {
  display: flex;
  justify-content: space-between;
}

.icon_item {
  width: 20%;
  text-align: center;
}

.icon_bg {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  margin: 10px auto 10px;
  color: #FFFFFF;
}

.bg1 {
  background-color: rgb(129, 252, 142);
}

.bg2 {
  background-color: rgb(252, 191, 40);
}

.bg3 {
  background-color: rgb(255, 125, 125);
}

.bg4 {
  background-color: rgb(117, 220, 143);
}

.bg5 {
  background-color: rgb(107, 175, 249);
}

.hot_plan {
  background-color: #FFF;
  border-radius: 15px;
  margin: 10px;
  padding: 10px;
}

.hot_title {
  display: flex;
  justify-content: space-between;
}

.hot_title div:first-child {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.hot_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

</style>